<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit" />
    <meta name="MobileOptimized" content="320" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <link rel="icon" href="./src/assets/logo.png" type="image/x-icon" />
    <link rel="shortcut icon" href="./src/assets/logo.png" type="image/x-icon" />
    <title>淘集集</title>
    <!-- <script src="./src/assets/js/common/rem.js"></script> -->
    <style>
        .taoLoading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 83%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 7;
}

.tao {
  width: 15.5rem;
  height: 11rem;
  position: relative;
  -webkit-transform: scale(0.35);
  transform: scale(0.35);
}

.cImg {
  width: 15.5rem;
  height: 6.04rem;
  position: absolute;
  left: 0;
  top: 1.875rem;
  background-size: 100% 100%;
  /* background-image: url(""); */
  background-image: url("");
  animation: a2 0.4s ease-out infinite alternate
}

.cImg1 {
  background-image: url("")
}

.taoWord,
.taoWord1 {
  width: 12rem;
  height: 4rem;
  position: absolute;
  left: 1.75rem;
  top: 0;
  background-size: 100% 100%;
  animation: a3 .4s ease-out infinite alternate;
  /* background-image: url(""); */
  background-image: url("");
}

.bottom {
  width: 8.5rem;
  height: .75rem;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 3.5rem;
  animation: a1 0.4s ease-out infinite alternate;
  background: #eee
}

@keyframes a1 {
  0% {
      transform: scale(1)
  }

  100% {
      transform: scale(0.4)
  }
}

@keyframes a2 {
  0% {
      opacity: 0
  }

  100% {
      opacity: 0.8
  }
}

@keyframes a3 {
  0% {
      transform: translateY(5rem);
  }

  100% {
      transform: translateY(0rem);
  }
}

@-webkit-keyframes a1 {
  0% {
    -webkit-transform: scale(1)
  }

  100% {
    -webkit-transform: scale(0.4)
  }
}

@-webkit-keyframes a2 {
  0% {
      opacity: 0
  }

  100% {
      opacity: 0.8
  }
}

@-webkit-keyframes a3 {
  0% {
      transform: translateY(5rem);
  }

  100% {
      transform: translateY(0rem);
  }
}
    </style>
</head>

<body>
    <script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
    <div id="app"></div>
    <div class="taoLoading" id="taoLoading">
        <div class="tao">
            <div class="cImg"></div>
            <div class="taoWord"></div>
            <div class="bottom"></div>
        </div>
    </div>
    <!-- built files will be auto injected -->
</body>

</html>
